<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            line-height: 60px;
        }

        li {
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // 面向过程

    // 操作 -> 单元素 => 直接操作
    // var title = document.getElementById("title");
    // console.log(title.innerHTML);
    // title.innerHTML = "标题";

    // 操作 -> 多元素 => 遍历获取 在操作
    // var liList = document.querySelectorAll(".list li");
    // for (var i = 0; i < liList.length; i++) {
    //     var li = liList[i];
    //     li.innerHTML = "123123";
    // }

    // => 批量操作元素 => 有可能是单元素,多元素  => 方法有区别
    // 使用 document.querySelectorAll()  无论是单元素获取还是多元素 => 都会存放到集合中


    // 接收一个css选择器 作为参数
    function GetEle(selector) {
        var obj = {
            // 操作的元素的集合
            eles: document.querySelectorAll(selector),
            // 获取和设置 集合中元素 html结构
            // html("123123")   有参数就设置
            // html()           没有参数就获取
            html: function (con) {
                if (arguments.length >= 1) {  // 有参数就设置
                    for (var i = 0; i < this.eles.length; i++) {
                        var li = this.eles[i];
                        li.innerHTML = con;  // arguments[0]
                    }
                } else {   //没有参数就获取
                    return this.eles[0].innerHTML;
                }
            }
        }
        return obj;
    }

    var $title = GetEle("#title");
    console.log($title);
    $title.html("1111111111");


    var $li = GetEle(".list li");
    console.log($li);
    $li.html("22222222222");










</script>

</html>